<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- 方式一 -->
      <!-- <TodoHeader @addTodo="addTodo"/> --> <!-- 给TodoHeader标签对象绑定addTodo事件监听 -->
      <TodoHeader ref="header"/>
      <TodoList :todos="todos"/>
      <!-- <TodoFooter :todos="todos" :deleteCompleteTodos="deleteCompleteTodos" :selectAllTodos="selectAllTodos"/>-->
      <TodoFooter>
        <input type="checkbox" v-model="isAllCheck" slot="checkAll"/>
        <span slot="count">已完成{{ completeSize }} / 全部{{ todos.length }}</span>
        <button class="btn btn-danger" v-show="completeSize" @click="deleteCompleteTodos" slot="delete">清除已完成任务</button>
      </TodoFooter>

      <!-- 方式二 -->
      <!--      <todo-header/>
            <todo-list/>
            <todo-footer/>-->
    </div>
  </div>
</template>

<!--
绑定事件监听  ----  订阅消息
触发事件     ----  发布消息
-->

<script>
import PubSub from 'pubsub-js';
import TodoHeader from "./components/TodoHeader";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";

export default {
  data() {
    return {
      // 从localStorage读取todos
      todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')

     /* todos: [
        {title: '吃饭', complete: false},
        {title: '睡觉', complete: true},
        {title: '编码', complete: false},
      ]*/
    }
  },

  mounted() { // 执行异步代码
    // 给<TodoHeader />绑定addTodo事件监听
    /*this.$on('addTodo', this.addTodo)*/
    this.$refs.header.$on('addTodo', this.addTodo)

    // 订阅信息
    PubSub.subscribe('deleteTodo', (mes, index) => {
      this.deleteTodo(index)
    })
  },

  methods: {
    addTodo(todo) {
      this.todos.unshift(todo)
    },
    deleteTodo(index) {
      this.todos.splice(index, 1)
    },
    // 删除所有被选中的todo
    deleteCompleteTodos() {
      this.todos = this.todos.filter(todo => !todo.complete)
    },
    // 全选/全不选
    selectAllTodos(check) {
      this.todos.forEach(todo => todo.complete = check)
    }
  },

  computed: {
    completeSize() {
      return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete ? 1 : 0), 0)
    },
    isAllCheck: {
      get() {
        return this.completeSize === this.todos.length && this.completeSize > 0
      },
      set(value) { // value是当前checkbox最新的值
        this.selectAllTodos(value)
      }
    }
  },

  watch: { // 监视
    todos: {
      deep: true,  // 深度监视
      handler: function (value){
        // 将todos最新的值的JSON数据，保存到localStorage
        window.localStorage.setItem('todos_key', JSON.stringify(value))
      }
    }
  },

  components: {
    TodoHeader,
    TodoList,
    TodoFooter
  }
}
</script>

<style>
.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
